<!-- <div class="toolbar">
    <div class="m-btn">
        <button (click)="editPermissionGroup()" tsBtn color="success">新增科目</button>
        <button (click)="loadDatas()" class="btn btn-white">
            <i class="fa fa-refresh fa-fw"></i>刷新数据
        </button>
    </div>
</div> -->
<div class="toolbar">
    <div class="row">
        <div class="col-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-white">共查询到</span>
                </div>
                <!-- value="{{pagination.total}}" -->
                <input type="text" class="form-control text-center bg-white" readonly placeholder="0">
                <div class="input-group-append">
                    <span class="input-group-text bg-white">条/结果</span>
                </div>
            </div>
        </div>
        <div class="col-6 text-right m-btn">
            <button class="btn btn-success" color="success" (click)="editPermissionGroup()" tsBtn>
                <span>新增</span>
            </button>
            <button (click)="loadDatas()" class="btn btn-white">
                <i class="iconfont icon-refresh mr-2"></i>
                <span>刷新数据</span>
            </button>
            <!-- <button (click)="doSearch()" class="btn btn-white">
                <i class="iconfont icon-search mr-2"></i>
                <span>搜索</span>
            </button> -->
        </div>
    </div>
</div>
<div class="card m-2" tsCollapses>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr class="bg-light">
                    <th scope="col">#</th>
                    <th scope="col">分类</th>
                    <th scope="col">科目类别</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let permissionGroupItem of permissionGroupItems;index as i">
                    <tr class="border-0">
                        <td>{{i+1}}</td>
                        <td>
                            {{permissionGroupItem.permissionGroup.permissionGroupName}}
                        </td>
                        <td>资产类</td>
                        <td>
                            <span tsTip="添加子权限" (click)="editPermission(permissionGroupItem.permissionGroup)" class="btn-icon btn-icon-primary">
                                <i class="iconfont icon-add-circle"></i>
                            </span>
                            <span tsTip="删除权限组" (click)="deletePermissionGroup(permissionGroupItem.permissionGroup,i)" class="btn-icon btn-icon-danger">
                                <i class="iconfont icon-delete"></i>
                            </span>
                            <span tsTip="编辑权限组" (click)="editPermissionGroup(permissionGroupItem.permissionGroup)" class="btn-icon btn-icon-info">
                                <i class="iconfont icon-edit"></i>
                            </span>
                            <span tsTip="展开/收起" (click)="permissionGroupItem.open=!permissionGroupItem.open" class="btn-icon btn-icon-dark">
                                <i class="iconfont icon-viewgallery"></i>
                            </span>
                        </td>
                    </tr>
                    <tr class="border-0">
                        <td class="pt-0 pb-0 border-0"></td>
                        <td colspan="3" class="pt-0 pb-0 border-0 pl-2">
                            <div tsCollapse [open]="permissionGroupItem.open">
                                <div *ngFor="let permission of permissionGroupItem.permissions" class="btn-group ml-1" style="display: block" tsCollapses
                                    [auto]="true">
                                    <button tsBtn (click)="editPermission(permissionGroupItem.permissionGroup,permission)">{{permission.permissionName}}</button>
                                    <button tsBtn (click)="deletePermission(permission)" style="height: 35px;border-radius: 0px 3px 3px 0px;">
                                        <i class="iconfont icon-delete"></i>
                                    </button>


                                    <span tsTip="添加子权限" (click)="editPermission(permissionGroupItem.permissionGroup)" class="btn-icon btn-icon-primary">
                                        <i class="iconfont icon-add-circle"></i>
                                    </span>
                                    <span tsTip="展开/收起" tsToggle class="btn-icon btn-icon-dark">
                                        <i class="iconfont icon-viewgallery"></i>
                                    </span>
                                    <!-- <div class="card-header pointer rounded d-flex justify-content-between" tsToggle>
                                        <span>你可以点击标题展开这个卡片</span>
                                        <i tsIcon="down"></i>
                                    </div> -->
                                    <!-- <div>
                                            <button tsBtn (click)="editPermission(permissionGroupItem.permissionGroup,permission)">{{permission.permissionName}}</button>
                                            <button tsBtn (click)="deletePermission(permission)">
                                                <i class="iconfont icon-delete"></i>
                                            </button>
                                        </div> -->
                                    <div tsCollapse [open]="false" style="margin-top:12px;margin-left: 20px;">
                                        <div *ngFor="let permission of permissionGroupItem.permissions" class="btn-group ml-1 mb-3">
                                            <button tsBtn (click)="editPermission(permissionGroupItem.permissionGroup,permission)">{{permission.permissionName}}</button>
                                            <button tsBtn (click)="deletePermission(permission)">
                                                <i class="iconfont icon-delete"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <br/>


                            </div>

                        </td>
                    </tr>


                </ng-container>
            </tbody>
        </table>
    </div>
</div>